import { lazy, Suspense } from "react";
import { BrowserRouter, useRoutes, Navigate } from "react-router-dom";
const Home = lazy(() => import("../views/home"));
const Car = lazy(() => import("../views/car"));
const MainLayout = lazy(() => import("../views/mainLayout"));
const Order = lazy(() => import("../views/order"));
const Detail = lazy(() => import("../views/detail"));
const routes = [
  {
    path: "/",
    element: <MainLayout></MainLayout>,
    children: [
      {
        path: "/",
        element: <Home></Home>,
      },
      {
        path: "/car",
        element: <Car></Car>,
      },
      {
        path: "/",
        element: <Navigate to="home"></Navigate>,
      },
    ],
  },
  {
    path: "/order",
    element: <Order></Order>,
  },
  {
    path: "/detail/:id",
    element: <Detail></Detail>,
  },
];
const Index = () => {
  const App = () => useRoutes(routes);
  return (
    <BrowserRouter>
      <Suspense>
        <App></App>
      </Suspense>
    </BrowserRouter>
  );
};
export default Index;
